<template>
  <PublicPage page-name="帮卖设置" class="help-sell-setting">
    <view class="list">
      <view class="setting-item" @click="_openPopup">
        <view class="top-section">
          <view class="title">一键帮卖默认下级佣金比例</view>
          <view class="ratio-wrap">
            <text class="num">{{subCRatio}}%</text>
            <view class="iconfont icon-arrow_right"></view>
          </view>
        </view>
        <view class="bottom-section">
          <view class="txt">一键帮卖时，我的佣金中分给下级帮卖的默认佣</view>
          <view class="txt">金比例</view>
        </view>
      </view>
    </view>
    <!-- 设置下级帮卖弹框 -->
    <u-popup v-model="dlPopup" mode="center" border-radius="14" mask-close-able @maskClick="dlPopup=false">
      <view>
        <view class="popupHead">设置下级帮卖</view>
        <view class="tc">
          <!-- 佣金比例 -->
          <view class="linh-30 fz-12 justify-center">
            <text class="themeFontColor">从我的佣金中分给下级帮卖</text>
            <view class="u-flex inputBox">
              <input v-model="ratioNum" :maxlength="4" class="themeFontColor" @input="_input"/>
              <text class="u-p-l-10 u-p-r-10">%</text>
            </view>
          </view>
          <!-- 快捷选择佣金比例 -->
          <view class="shortcut_options justify-between items-center">
            <view class="options_box justify-center items-center fz-12 viceColorN8" @click.stop="shortcutFn(80)">80%</view>
            <view class="options_box justify-center items-center fz-12 viceColorN8" @click.stop="shortcutFn(70)">70%</view>
            <view class="options_box justify-center items-center fz-12 viceColorN8" @click.stop="shortcutFn(60)">60%</view>
            <view class="options_box justify-center items-center fz-12 viceColorN8" @click.stop="shortcutFn(50)">50%</view>
          </view>
        </view>
        <view class="btnBox">
          <view class="btn" @click="_handleSubmit">确定</view>
        </view>
      </view>
    </u-popup>
  </PublicPage>
</template>

<script>
import PublicPage from "@/components/publicPage/index.vue"
import Util from '@/api/util.js'
import userApi from '@/api/user.js'
export default {
  name: 'helpSellSetting',
  components: {
    PublicPage
  },
  data() {
    return {
      dlPopup: false,
      ratioNum: ''
    }
  },
  computed: {
    subCRatio() {
      return this.$store.state.userInfo.subordinateHelpSellCommissionRatio || 0
    }
  },
  onShow() {
    console.log(this.subCRatio)
  },
  methods: {
    _openPopup() {
      this.ratioNum = this.subCRatio
      this.dlPopup = true
    },
    _input(e) {
      this.$nextTick(() => {
        this.ratioNum = Util.clearNoNum(e.target.value)
        if (Number(this.ratioNum) > 100) {
          this.ratioNum = 100
        }
      })
    },
    shortcutFn(num) {
      this.ratioNum = num
    },
    _handleSubmit() {
      const ratioNum = parseFloat(this.ratioNum)
      if (ratioNum !== this.subCRatio) {
        userApi.updateHelpSellRatio({ subordinateHelpSellCommissionRatio: ratioNum }).then(res => {
          if (res.code === 200) {
            this.$store.commit('USERINFO', {
              ...this.$store.state.userInfo,
              subordinateHelpSellCommissionRatio: ratioNum
            })
            this.dlPopup = false
          }
        })
      } else {
        this.dlPopup = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.help-sell-setting {
  .list {
    padding: 20rpx 24rpx;
  }
  .setting-item {
    box-sizing: border-box;
    width: 100%;
    height: 164rpx;
    padding: 24rpx 32rpx;
    margin-bottom: 20rpx;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 24rpx rgba(150, 151, 153, 0.16);
    background: #FFFFFF;
    .top-section {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 100%;
      height: 44rpx;
    }
    .title {
      font-size: 32rpx;
      line-height: 44rpx;
      font-weight: 500;
      color: $n8Color;
    }
    .ratio-wrap {
      display: flex;
      align-items: center;
    }
    .num {
      font-size: 28rpx;
      line-height: 40rpx;
      color: $themeColor;
    }
    .icon-arrow_right {
      margin-left: 8rpx;
      font-size: 32rpx;
      color: $n6Color;
    }
    .bottom-section {
      font-size: 24rpx;
      color: $n6Color;
    }
    .txt {
      line-height: 32rpx;
    }
  }
  .popupHead {
    width: 622rpx;
    background: linear-gradient(180deg, #fffbe8 0%, rgba(255, 251, 232, 0) 100%);
    line-height: 128rpx;
    text-align: center;
    font-size: 32rpx;
    font-weight: 500;
  }
  .inputBox {
    border: solid 1px #dcdee0;
    align-items: center;
    padding-left: 10rpx;
    margin-left: 20rpx;
    border-radius: 8rpx;
    width: 120rpx;
  }
  .shortcut_options {
    width: 432rpx;
    margin: 24rpx auto 72rpx;
    .options_box {
      width: 84rpx;
      height: 40rpx;
      border-radius: 4rpx;
      border: 2rpx solid #DCDEE0;
    }
  }
  .btnBox {
    display: flex;
    line-height: 96rpx;
    font-size: 32rpx;
    .btn {
      width: 100%;
      text-align: center;
      box-shadow: 1px -1px 1px #ebedf0;
      color: $themeColor;
      font-weight: 500;
    }
  }
}
</style>